<template>
  <div>
    <el-table :data="tableData.data" style="width: 100%">
      <el-table-column fixed type="index" label="序号" />
      <el-table-column label="图片">
        <template #default="scope">
          <img :src="scope.row.img1" alt style="width: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="proname" label="名称" />
      <el-table-column prop="brand" label="品牌" />
      <el-table-column
        prop="category"
        label="分类"
        :filters="[
          { text: '手机', value: '手机' },
          { text: '家电', value: '家电' },
          { text: '口红', value: '口红' },
          { text: '宠物活体', value: '宠物活体' },
        ]"
        :filter-method="filterHandler"
      />
      <el-table-column prop="originprice" label="原价" sortable />
      <el-table-column prop="discount" label="折扣" sortable />
      <el-table-column prop="sales" label="销量" sortable />
      <el-table-column label="是否在售卖">
        <template #default="scope">
          <el-switch
            v-model="scope.row.issale"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否在秒杀">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isseckill"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否在推荐">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isrecommend"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <el-button type="danger">删除</el-button>
      </el-table-column>
    </el-table>
    {{ form.count }}
    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableData.total * 10"
      v-model:current-page="form.count"
    />
  </div>
</template>
<script>
import { getProList } from "../../service/pro.js";
export default {
  computed: {
    tableData() {
      return this.$store.state.prolist;
    },
  },
  data() {
    return {
      form: {
        count: 1,
        limitNum: 10,
      },
      filterHandler: {
        value: "string",
        row: "User",
        column: 0,
      },
    };
  },
  methods: {
    getlist() {
      getProList(this.form).then((res) => {
        // console.log(res)
        if (res.code === "200") {
          this.$store.commit("setProlist", res);
        }
      });
    },
  },
  created() {
    this.getlist();
  },
};
</script>
<style scoped>
</style>